<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_列表渲染_过滤与排序</title>
</head>
<body>
<!--
1. 列表过滤
2. 列表排序
-->
<div id="demo">
  <input v-model="searchName" type="text" />
  <ul>
    <li v-for="(item, index) in filterPersons" :key="item.id">
      {{ index + 1 }} -- {{ item.name }}--{{ item.age  }}
    </li>
  </ul>
  <button @click="sortType=1">年龄升序</button>
  <button @click="sortType=2">年龄降序</button>
  <button @click="sortType=0">原本顺序</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      searchName: '', // 搜索关键字
      sortType: 0, // 排序方式: 0: 不排序, 1: 升序, 2: 降序
      persons: [
        {id: 1, name: 'Jack', age: 12},
        {id: 3, name: 'Bob', age: 11},
        {id: 5, name: 'Cat', age: 13},
        {id: 6, name: 'Jose', age: 10},
        {id: 8, name: 'Jarry', age: 16},
        {id: 9, name: 'Tom', age: 18},
        {id: 7, name: 'Tony', age: 17},
      ]
    },

    computed: {
      // 要显示的过滤后的数组
      filterPersons () {
        console.log('filterPersons()')
        // 取出依赖数据
        const {searchName, persons, sortType} = this
        // 计算出结果
        const arr = persons.filter(p => {
          return p.name.includes(searchName)
        })

        // 有可能需要排序 ==> 升序/降序
        if (sortType!==0) {
          // 进行排序
          arr.sort((item1, item2) => { // 比较函数, 如果返回值大于0, item2放在item1的左边
            if (sortType===1) { // 升序
              return item1.age - item2.age
            } else { // 降序
              return item2.age - item1.age
            }
          })
        }

        // 返回结果
        return arr
      }
    }
  })
</script>
</body>
</html>